/**常量 */
const API_BASE_URL = '';

/**相关数据 */
const mainData = {
    /**顶部栏 */
    searchType:[],//get classified information of search -> pre void type 传入分类信息
    searchLoactionType:[],//get classified information of location posiontion 传入地理分类信息
    collectNum:0,//收藏数 传入收藏数量
    shopCarNum:0,//购物车商品数量
    shopGoodsInfo:[],//购物车商品信息 传入{商品信息,购买数量}
    /**首页 */
    topDownloadType:[],//get classified information of top download 传入分类信息
    topDownloadData:{},//get items of top download  传入商品信息
    topAwsomeList:[],//精品 传入商品信息
    topDownloadList:[],//下载 传入商品信息
    topPopularList:[],//推荐 传入商品信息
    topLikeList:[],//好评 传入商品信息
    /**商品列表 */
    shopListCategoryList:[],//商品分类 {类型,该类型的商品数量,图标url}
};

/**1.push...无效 2.吃内存 3.吃性能 实测自己的E5神u不卡 4.数据持有 -> 目标对象 5.用途 -> 只需要改数据而不用调用和寻找需要调用的方法(封装好了修改单条数据的方法,且可以按调用顺序执行)
 * @param index 指向 stores 里面的对象 简单配置一下就能指向各种对象
 * 关于封装dom方法的 参数用途
 * @param name index 指向对象里面的属性的key值的字符串 可以取到二维数组([[]]二维数组的name -> key[num]) (不重要)再多维就改一下getStr -> for/递归
 * @param key 如果newValue(新的参数)是一个对象 那么可以传入key来获取属性名
 * @param position 基于jquery的位置 几乎可以参考css选择器语法直觉
 * 关于方法的用途
 * @param func 近似 base -> 数据改变后执行的函数(取到改变的参数) -> 重复调用添加多个
 * 
 * @param add 近似 append -> 某个位置里 追加新元素  (数据改变后不会删除原有的数据)
 * @param remove 近似 remove -> 某个位置里 删除全部元素
 * @param alter 近似 replace all children -> 某个位置里 所有元素替换成新元素 (数据改变后会删除原有的数据)
 * @param replace 近似 replace -> 定位到position这个位置的元素 -> 并直接替换掉(*注意:replace() text 不会破坏position元素本身 其余的会破坏position本身)
 * 
 * @param ByHtml 近似 innerHtml 直接操作html标签 *注意:html标签里的{value}会被替换为newValue数据 
 * @param ByTag 近似 innerText 根据html的标签名 -> 写入newValue的数据
 * 关于非业务逻辑的方法的用途
 * @param init 初始化 -> 浅层冻结 只能操作data里面的数据
 * @param clearAll 清除传入属性的所有绑定释放内存
*/
const simpleInterceptor = {
    stores:[mainData],
    /**point to class */
    data:{
        /**0:mainData */
        index:0,
        clear:false
    },
    init(){
        Object.freeze(this);
    },
    /**func -> @param func (get newValue)  @param name name-of-data (need not name of class)*/
    func(func,name){
        if(name == null)
            return;;
        if(this.stores[this.data.index] == null)
            return;
        const getResult = this.getStr(name);
        let objPointer;
        let nameValue;
        if(getResult === false){
            this.stores[this.data.index]['_' + name] = this.stores[this.data.index][name];
            objPointer = this.stores[this.data.index];
            nameValue = name;
        }else{
            this.stores[this.data.index][getResult.strName]['_' + getResult.index] = this.stores[this.data.index][getResult.strName][getResult.index];
            objPointer = this.stores[this.data.index][getResult.strName];
            nameValue = getResult.index;
        }
        if(objPointer['__' + nameValue] == null)
            objPointer['__' + nameValue] = [];;
        objPointer['__' + nameValue].push(func)
        if(this.data.clear)
            objPointer['__' + nameValue] = null;
        Object.defineProperty(objPointer,nameValue,{
            set(newValue){
                this['_' + nameValue] = newValue;
                newValue = simpleInterceptor.autoInsert(newValue);
                for(index in this['__' + nameValue]){
                    this['__' + nameValue][index](newValue)
                }
            },
            get(){
                return this['_' + nameValue];
            }
        })
    },
    /**add by tag -> @param positoin @param tag html tag @param name name-of-data @param key 如果是一个对象 key可以拿到对应的value*/
    addByTag(position,tag,name,key){
        this.func((newValue)=>{
            for(item of newValue){
                $("<" + tag + "></" + tag + ">").text(this.autoAchieve(item,key)).appendTo(position);
            };
        },name);
    },
    /**根据html来追加元素 -> @param positoin @param html @param {value} 自动将html里标记{value}的转成新增的值(注意 只有一对花括号) @param name name-of-data @param key 选填 如果是一个对象 key可以拿到对应的value*/
    addByHtml(position,html,name,key){
        const reg= /{value}/g;
        this.func((newValue)=>{
            for(item of newValue){
                $(html.replace(reg,this.autoAchieve(item,key))).appendTo(position);
            };
        },name);
    },
    /**replace text(不会破坏position结构 会破坏里面内容) -> @param positoin insert position @param name name-of-data(need not name of class) @param key 选填 如果是一个对象 key可以拿到对应的value*/
    replace(position,name,key){
        this.func((newValue)=>{
            $(position).each((index)=>{
                $(position).eq(index).text(this.autoAchieve(newValue[index],key));
            });
        },name);
    },
    /**根据tag替换元素(会破坏position结构) -> @param positoin @param tag html tag @param name name-of-data @param key 选填 如果是一个对象 key可以拿到对应的value*/
    replaceByTag(position,tag,name,key){
        this.func((newValue)=>{
            for(item of newValue){
                $(position).eq(0).replaceWith($("<" + tag + ">" + this.autoAchieve(item,key) + "</" + tag + ">"));
            }
        },name);
    },
    /**根据html替换元素(会破坏position结构) -> @param positoin @param html @param {value} 自动将html里标记{value}的转成新增的值(注意 只有一对花括号) @param name name-of-data @param key 选填 如果是一个对象 key可以拿到对应的value*/
    replaceByHtml(position,html,name,key){
        const reg= /{value}/g;
        this.func((newValue)=>{
            for(item of newValue){
                $(position).eq(0).replaceWith($(html.replace(reg,this.autoAchieve(item,key))));
            }
        },name);
    },
    /**根据tag替换元素(伪替换 -> 用于替换掉 某一个位置里面的所有元素) -> @param positoin @param tag html tag @param name name-of-data @param key 选填 如果是一个对象 key可以拿到对应的value*/
    alterByTag(position,tag,name,key){
        this.func((newValue)=>{
            this.remove(position);
            for(item of newValue){
                $("<" + tag + "></" + tag + ">").text(this.autoAchieve(item,key)).appendTo(position);
            };
        },name);
    },
    /**根据html替换元素(伪替换 -> 用于替换掉 某一个位置里面的所有元素) -> @param positoin @param html @param {value} 自动将html里标记{value}的转成新增的值(注意 只有一对花括号) @param name name-of-data @param key 选填 如果是一个对象 key可以拿到对应的value*/
    alterByHtml(position,html,name,key){
        const reg= /{value}/g;
        this.func((newValue)=>{
            this.remove(position);
            for(item of newValue){
                $(html.replace(reg,this.autoAchieve(item,key))).appendTo(position);
            };
        },name);
    },
    /**移除某个位置的子元素 */
    remove(positoin){
        $(positoin).children().remove();
    },
    /**解绑 */
    clearAll(name){
        this.data.clear = true;
        this.func(()=>{},name);
        this.data.clear = false;
    },
    /**节省CPU性能只取一层 */
    getStr(str){
        try{
            let reg=/\[[0-9]*\]/;
            if(reg.test(str)){
                const info = {};
                const strIndex = str.match(reg)[0];
                info.index = strIndex.substr(1,strIndex.length - 2);
                info.strName = str.substr(0,str.indexOf('['));
                return info;
            }
            return false;
        }catch(e){
            return false;
        }
    },
    /**确保newValue是可迭代且不是字符串等的类型 */
    autoInsert(obj){
        let newObj = {};
        if(typeof(obj) != 'object'){
            newObj[0] = obj;
        }else{
            newObj = obj;
        }
        return newObj;
    },
    /**根据key值改造 */
    autoAchieve(obj,key){
        return key === undefined ? obj : obj[key];
    }
}
/**初始化 -> simpleInterceptor */
simpleInterceptor.init();

/**初始化 -> 业务逻辑 */

/**
 * 顶部栏
*/
function initTop(){
    /**搜索 -> 商品分类 */
    simpleInterceptor.addByTag(".search-style-2>form>select","option","searchType");
    /**浏览 -> 商品分类 */
    simpleInterceptor.func((newValue)=>{
        for(index in newValue){
            let position = '#preview-type-';
            if(index < 10){
                position += (1 + index%2);
            }else{
                position += (3 + index%2);
            }
            $(`<li><a href="shop-grid-right.html"> <img src="assets/imgs/theme/icons/category-1.svg" alt="">&nbsp;&nbsp;&nbsp;&nbsp;${newValue[index]}&nbsp;&nbsp;&nbsp;&nbsp;</a></li>`).appendTo(position);
        }
    },'searchType');

    /**地理位置分类 */
    simpleInterceptor.addByTag(".search-location>form>select","option","searchLoactionType");

    /**收藏数 */
    simpleInterceptor.replace("#collect-num",'collectNum');

    /**购物车 */
    simpleInterceptor.replace("#shop-cat-num",'shopCarNum');
    simpleInterceptor.func((newValue)=>{
        //refresh
        mainData.shopCarNum = 0;
        $('#shop-car-total-price').text(0);
        simpleInterceptor.remove('#shop-car-goods-info')
        for(index in newValue){
            $('#shop-car-goods-info').append($(
                `
                <li>
                    <div class="shopping-cart-img">
                        <a href="shop-product-full.html"><img alt="Nest" src="assets/imgs/shop/thumbnail-2.jpg"></a>
                    </div>
                    <div class="shopping-cart-title">
                        <h4><a href="shop-product-full.html">${newValue[index].goods.name}</a></h4>
                        <h4><span>${newValue[index].num} × </span>${newValue[index].goods.newPrice}</h4>
                    </div>
                    <div class="shopping-cart-delete">
                        <a href="#"><i class="fi-rs-cross-small"></i></a>
                    </div>
                </li>
                `
            ))
            $('#shop-car-total-price').text(parseInt($('#shop-car-total-price').text()) + newValue[index].num * newValue[index].goods.newPrice);
            mainData.shopCarNum += newValue[index].num;
        }
    },'shopGoodsInfo');
}

/**
 * 首页
 */
function initIndex(){
    /**下载量排行 -> 分类 */
    simpleInterceptor.func((newValue)=>{
        for(index in newValue){
            $("#myTab").append($('<li class="nav-item" role="presentation"></li>').append(
                $('<button class="nav-link" id="nav-tab-' + (parseInt(index) + 2).toString().toEnglish() + '" data-bs-toggle="tab" data-bs-target="#tab-' + (parseInt(index) + 2).toString().toEnglish() + '" type="button" role="tab" aria-controls="tab-' + (parseInt(index) + 2).toString().toEnglish() + '" aria-selected="false"></button>').text(newValue[index])
            ));
            $("#myTabContent").append($(`
                <div class="tab-pane fade" id="tab-${(parseInt(index) + 2).toString().toEnglish()}" role="tabpanel" aria-labelledby="tab-${(parseInt(index) + 2).toString().toEnglish()}">
                    <div class="row product-grid-4">
                    </div>
                </div>
            `));
            for(let i = 0;i < 10;i++){
                $(`#tab-${(parseInt(index) + 2).toString().toEnglish()}>div`).append(new GoodsInfo().createBlank());
            }
            mainData.topDownloadData[parseInt(index) + 1] = [];
            const indexValue = index;
            //link -> goods
            simpleInterceptor.func((newValue)=>{
                for(childIndex in newValue){
                    $(`#tab-${(parseInt(indexValue) + 2).toString().toEnglish()}>div>div`).eq(childIndex).replaceWith(
                        $(mainData.topDownloadData[parseInt(indexValue) + 1][childIndex].createItem())
                    )
                }
            },`topDownloadData[${parseInt(index) + 1}]`);
        }
    },"topDownloadType");
    /**init -> link -> goods -> 全部分类 */
    simpleInterceptor.func((newValue)=>{
        for(index in newValue){
            $(`#tab-one>div>div`).eq(index).replaceWith(
                $(mainData.topDownloadData[0][index].createItem())
            )
        }
    },'topDownloadData[0]')
    /**初始化 -> 下载量排行 全部分类 */
    for(let i = 0;i < 10;i++){
        $(`#tab-one>div`).append(new GoodsInfo().createBlank());
    }

    /**各大榜单 */
    simpleInterceptor.func((newValue)=>{
        for(index in newValue){
            $('#top-awsome>article').eq(index).replaceWith(
                $(newValue[index].createSimpleItem())
            );
        }
    },'topAwsomeList')
    simpleInterceptor.func((newValue)=>{
        for(index in newValue){
            $('#top-download>article').eq(index).replaceWith(
                $(newValue[index].createSimpleItem())
            );
        }
    },'topDownloadList')
    simpleInterceptor.func((newValue)=>{
        for(index in newValue){
            $('#top-popular>article').eq(index).replaceWith(
                $(newValue[index].createSimpleItem())
            );
        }
    },'topPopularList')
    simpleInterceptor.func((newValue)=>{
        for(index in newValue){
            $('#top-like>article').eq(index).replaceWith(
                $(newValue[index].createSimpleItem())
            );
        }
    },'topLikeList')
    for(let i = 0;i < 3;i++){
        $('#top-awsome').append(new GoodsInfo().createSimpleBlank());
        $('#top-download').append(new GoodsInfo().createSimpleBlank());
        $('#top-popular').append(new GoodsInfo().createSimpleBlank());
        $('#top-like').append(new GoodsInfo().createSimpleBlank());
    }
    
}

/**
 * 商品列表
 */
function initShop(){
    /**商品列表分类 -> 使用 key + {value} + addByHtml + replaceByHtml的形式 来一条一条元素的追加 */
    simpleInterceptor.alterByHtml('#shop-list-category',
    `
    <li>
        <a href="shop-grid-right.html">
            <img src="{value}" alt="">
            <name></name>
        </a>
        <span class="count"><num></num></span>
    </li>
    `,'shopListCategoryList','url');
    simpleInterceptor.replaceByHtml('#shop-list-category name',`<span>{value}</span>`,'shopListCategoryList','name');
    simpleInterceptor.replaceByHtml('#shop-list-category num',`<span>{value}</span>`,'shopListCategoryList','num');

    

}

/**监听事件 */

/**
 * 首页
 */
function actionListInitIndex(){
    /**监听点击事件 -> 下载量排行 -> 点到哪个就要发送请求 */
    $('#myTab').delegate('li','click',function(){
        let index = convertToNum($(this).children().attr('aria-controls').substr(4)) - 1;
        if(mainData.topDownloadData[index].length == 0){
            //这里处理请求
            simulationRequest(()=>{
                return createGoods(10);
            }).then((res)=>{
                if(res.code == 200){
                    if(mainData.topDownloadData[index].length == 0)
                        mainData.topDownloadData[index] = res.data;;
                }
            })
        }
    })
}

/**模拟网络异步加载 */

/**
 * 顶部栏 
 */
simulationRequest(()=>{
    /**set search type */
    mainData.searchType = ['会计','知识','电子签名','客户关系管理','定制','订阅',
    '租赁','POS','内部沟通','文件管理','项目'];

    /**set search type */
    mainData.searchLoactionType = ['黑龙江','吉林','辽宁','河北','甘肃','青海','陕西','河南','山东',
    '山西','安徽','湖北','湖南','江苏','四川','贵州','云南','浙江','江西','广东','福建','台湾','海南',
    '新疆','内蒙','宁夏','广西','西藏','北京','上海','天津','重庆','香港','澳门'];

    /**收藏数 */
    mainData.collectNum = Math.floor(Math.random() * 400 + 1);

    /**购物车添加数 */
    mainData.shopGoodsInfo = [{goods:createGoods(1)[0],num:Math.floor(Math.random() * 10 + 1)},{goods:createGoods(1)[0],num:Math.floor(Math.random() * 10 + 1)},{goods:createGoods(1)[0],num:Math.floor(Math.random() * 10 + 1)}];

    return {timestamp:new Date().getTime()}

}).then((res)=>{
    console.log(res);
})

/**
 * 首页
 */
simulationRequest(()=>{
    /**top Download Data */
    mainData.topDownloadData[0] = createGoods(10);

    /**set search type */
    mainData.topDownloadType = ['会计','知识','电子签名','客户关系管理','定制','订阅',
    '租赁','POS','内部沟通','文件管理','项目'];

    /**各大榜单 */
    mainData.topAwsomeList = createGoods(3);
    mainData.topDownloadList = createGoods(3);
    mainData.topPopularList = createGoods(3);
    mainData.topLikeList = createGoods(3);
})

/**
 * 商品列表
 */
simulationRequest(()=>{
    /**关于右侧栏的分类 */
    mainData.shopListCategoryList = [{url:'assets/imgs/theme/icons/category-1.svg',num:Math.floor(Math.random() * 20 + 5),name:'会计'},
    {url:'assets/imgs/theme/icons/category-4.svg',num:Math.floor(Math.random() * 20 + 5),name:'知识'},
    {url:'assets/imgs/theme/icons/category-3.svg',num:Math.floor(Math.random() * 20 + 5),name:'电子签名'},
    {url:'assets/imgs/theme/icons/category-1.svg',num:Math.floor(Math.random() * 20 + 5),name:'客户关系管理'},
    {url:'assets/imgs/theme/icons/category-2.svg',num:Math.floor(Math.random() * 20 + 5),name:'定制'},
    {url:'assets/imgs/theme/icons/category-2.svg',num:Math.floor(Math.random() * 20 + 5),name:'订阅'}]
})
